<template>
    <div>
        <div class="flex justify-center flex-col items-center">
            <el-form class=" w-2/5" ref="editForm" :model="state.userInfo" :rules="state.rules">
                <el-form-item label="头像" label-width="120" prop="avatarUrl">
                    <UploadAvatar :imageUrl="getAvatarUrl(state.userInfo.avatarUrl)" @updateImage="updateImage">
                    </UploadAvatar>
                </el-form-item>
                <el-form-item label="账号" label-width="120" prop="username">
                    <el-input v-model="state.userInfo.username"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="密码" label-width="120" prop="password">
                            <el-input v-model="state.userInfo.password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="确认密码" label-width="120" prop="confirmPassword">
                            <el-input v-model="state.userInfo.confirmPassword"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="真实姓名" label-width="120" prop="fullname">
                            <el-input v-model="state.userInfo.fullname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" label-width="120" prop="sex">
                            <el-select v-model="state.userInfo.sex" placeholder="请选择">
                                <el-option label="男" :value="0"></el-option>
                                <el-option label="女" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="邮箱" label-width="120" prop="email">
                            <el-input v-model="state.userInfo.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" label-width="120" prop="phonenumber">
                            <el-input v-model="state.userInfo.phonenumber"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="个人简介" label-width="120" prop="introduction">
                    <el-input type="textarea" v-model="state.userInfo.introduction" :rows="5" :cols="30"></el-input>
                </el-form-item>
            </el-form>
            <div class="flex justify-between items-center">
                <el-button type="primary" size="mini" @click="submitForm">保存</el-button>
                <el-button size="mini" @click="toPge">返回</el-button>
            </div>
        </div>

    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from 'vue-router'
import UploadAvatar from "./UploadAvatar.vue";
import { userUpdate } from '../api/user.js';
import { useTabsStore } from '../store/store.js';
import { getAvatarUrl } from '../utils/auth'
import { messageCreate } from '../api/message/message.js';
const router = useRouter() //实例化
const editForm = ref()
const tabsStore = useTabsStore();

// 在验证规则中使用自定义校验函数
const validatePassword = (rule, value, callback) =>
{
    console.log(state.userInfo.password);
    if (value === '' || value === state.userInfo.password) {
        callback();
    } else {
        callback(new Error('两次输入密码不一致'));
    }
};
const state = reactive({
    // 用户信息
    userInfo: {
        username: 'root99',
        password: '111',
        confirmPassword: '111',
        email: '2029481325@qq.com',
        phonenumber: '19815133485',
        fullname: '程封',
        sex: 1,
        introduction: '测试',
        avatarUrl: ''
    },
    rules: {
        avatarUrl: [
            { required: true, message: '请上传头像', trigger: 'blur' },
        ],
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        confirmPassword: [
            { required: true, message: '请确认密码', trigger: 'blur' },
            { validator: validatePassword, trigger: 'blur' },
        ],
        email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
        ],
        phonenumber: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
        ],
        fullname: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        sex: [
            { required: true, message: '请选择性别', trigger: 'change' },
        ],
        introduction: [
            { required: true, message: '请输入个人简介', trigger: 'blur' },
        ],
    }
})

const submitForm = () =>
{
    editForm.value.validate((valid) =>
    {
        if (valid) {
            userUpdate(state.userInfo).then(res =>
            {
                ElMessage({
                    showClose: true,
                    message: '修改成功',
                    type: 'success',
                })
                const userData = {
                    userID: res.user.UserID,
                    avatarUrl: res.user.Avatar,
                    departmentName: res.user.DepartmentName,
                    email: res.user.Email,
                    fullName: res.user.FullName,
                    introduction: res.user.Introduction,
                    phoneNumber: res.user.PhoneNumber,
                    userName: res.user.UserName,
                    userType: res.user.UserType,
                    sex: res.user.Sex,
                    password: res.user.Password,
                    confirmPassword: res.user.Password,
                }
                tabsStore.setUserData(userData)
                messageCreate({ userId: tabsStore.getUserData().userID, message: `${tabsStore.getUserData().userName}账号 修改了个人信息`, operationType: 'message' })
                // window.location.reload()
            }).catch(err =>
            {
                console.log(err)
            })
        } else {
            console.log('修改失败')
            return false
        }
    })
}
// 上传图片
const updateImage = (val) =>
{
    state.userInfo.avatarUrl = val
}
const init = async () =>
{
    state.userInfo = {
        userId: tabsStore.getUserData().userID,
        username: tabsStore.getUserData().userName,
        password: tabsStore.getUserData().password,
        confirmPassword: tabsStore.getUserData().password,
        email: tabsStore.getUserData().email,
        phonenumber: tabsStore.getUserData().phoneNumber,
        fullname: tabsStore.getUserData().fullName,
        sex: tabsStore.getUserData().sex,
        introduction: tabsStore.getUserData().introduction,
        avatarUrl: tabsStore.getUserData().avatarUrl
    }
    console.log(tabsStore.getUserData(), "=====>");
}

// 返回主页
const toPge = () =>
{
    router.push('/home')
}
onMounted(() =>
{
    init()
})
</script>

<style lang="scss" scoped></style>